<!--
  Generated template for the IndexQueryPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>预算进度</ion-title>
  </ion-navbar>

</ion-header>


<ion-content class="plan-con">
  <div class="plan-center-div">
   <!-- <div class="title">
      <span style="margin:0 auto;width: 100%;font-size: 1.7rem;color: #000">指标名称</span>
    </div>-->
    <div class="input_div">
      <ion-input type="search" placeholder="请输入指标名称" [(ngModel)]="searchName" (change)="search(searchName)"></ion-input>
    </div>
    <div *ngIf="planList.length==0" style="text-align: center">
      <div >
        <img src="assets/imgs/no-data.png" style="width: 300px;margin-top: 100px;">
      </div>
      <label style="font-size: 13px">~暂无数据~</label>
    </div>
    <ion-scroll scrollY class="scorll" >
      <div class="plan-panel" *ngFor="let item of planList">
        <div class="plan-item">
          <span>指标名称:</span>
          <span> &nbsp;&nbsp;{{item.ZhiBiaoMC}}</span>

        </div>
        <div class="plan-item">
          <span>批复金额:</span>
          <span>  &nbsp;&nbsp;{{item.PiFuJE}}</span>
        </div>
        <div class="plan-item" *ngIf='item.KeYongYE !="0.00"'>
          <span>可用金额:</span>
          <span>  &nbsp;&nbsp;{{item.KeYongYE}}</span>
        </div>
        <div class="plan-item">
          <span>执行率:</span>&nbsp;&nbsp;
          <div style="height: 1rem;" [ngStyle]="{'background-color':item.color,'width':item.ZhiXingLV+'px'}"></div>
          <span>  &nbsp;&nbsp;{{item.ZhiXingLV}}%</span>
        </div>
        <!--<div class="btn">
          <img src="assets/imgs/icon_select.png" style="width: 1.5rem;height: 1.5rem">
          <span color="white" (click)="selectHandler(item.zhiBiaoMC,item.keYongYE)">选择</span>
          &lt;!&ndash;<button ion-button small color="white" (click)="detailHandler()">详情</button>&ndash;&gt;
        </div>-->
      </div>

    </ion-scroll>

  </div>
</ion-content>
